<script setup lang="ts">
import { computed, ref, watch } from "vue";
// 定义水果对象的类型
interface Fruit {
  id: number;
  icon: string;
  isChecked: boolean;
  num: number;
  price: number;
}

const defaultArr = ref<Fruit[]>([
  {
    id: 1,
    icon: "https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/ll.png",
    isChecked: false,
    num: 2,
    price: 6,
  },
  {
    id: 2,
    icon: "https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/smt.png",
    isChecked: false,
    num: 7,
    price: 20,
  },
  {
    id: 3,
    icon: "https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/tg.png",
    isChecked: false,
    num: 3,
    price: 40,
  },
  {
    id: 4,
    icon: "https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/xg.png",
    isChecked: false,
    num: 10,
    price: 3,
  },
  {
    id: 5,
    icon: "https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/yl.png",
    isChecked: false,
    num: 20,
    price: 34,
  },
]);

// 水果列表
const fruitList =
  localStorage.getItem("list") !== null
    ? ref(JSON.parse(localStorage.getItem("list") as string) as Fruit[])
    : defaultArr;

const totalPrice = computed(() => {
  return fruitList.value
    .filter((item) => item.isChecked)
    .reduce((sum, item) => {
      return sum + item.price * item.num;
    }, 0);
});

const totalNum = computed(() => {
  return fruitList.value
    .filter((item) => item.isChecked)
    .reduce((sum, item) => {
      return sum + item.num;
    }, 0);
});

const deleteItem = (id: number) => {
  fruitList.value = fruitList.value.filter((item) => item.id !== id);
};

const addNum = (id: number) => {
  // fruitList.value = fruitList.value.map((item) => {
  //   if (item.id === id) {
  //     return {
  //       ...item,
  //       num: item.num + 1,
  //     };
  //   }
  //   return item;
  // });
  const item = fruitList.value.find((item) => item.id === id);
  // if (item) {
  //   item.num += 1;
  // }
  item && item.num++;
};

const deleteNum = (id: number) => {
  // fruitList.value = fruitList.value.map((item) => {
  //   if (item.id === id) {
  //     return {
  //       ...item,
  //       num: item.num > 1 ? item.num - 1 : 1,
  //     };
  //   }
  //   return item;
  // });
  const item = fruitList.value.find((item) => item.id === id);
  // if (item) {
  //   item.num = item.num > 1 ? item.num - 1 : 1;
  // }
  item && item.num--;
};

const checkAll = computed({
  get() {
    return fruitList.value.every((item) => item.isChecked);
  },
  set(value) {
    fruitList.value.forEach((item) => (item.isChecked = value));
  },
});

// 侦听水果列表的变化
watch(
  () => fruitList,
  (newValue) => {
    // 需要将变化后的 newValue 存入本地 （转JSON）
    localStorage.setItem("list", JSON.stringify(newValue.value));
  },
  { deep: true }
);
</script>

<template>
  <div class="app-container column">
    <!-- 轮播图 -->
    <div class="banner-box">
      <img
        class="width"
        src="https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/sg_top.png"
        alt=""
      />
    </div>
    <!-- 导航栏 -->
    <div class="nav-box width">
      <span>🏠</span>
      /
      <span>购物车</span>
    </div>
    <!-- 主体 -->
    <div class="main width" v-if="fruitList.length">
      <div class="table">
        <!-- 表格 -->
        <div class="thead">
          <div class="tr row">
            <div class="th">选中</div>
            <div class="th th-pic">图片</div>
            <div class="th">单价</div>
            <div class="th num-th">个数</div>
            <div class="th">小计</div>
            <div class="th">操作</div>
          </div>
        </div>
        <!-- 身体 -->
        <div class="tbody">
          <div class="tr active row" v-for="item in fruitList" :key="item.id">
            <div class="td">
              <input type="checkbox" v-model="item.isChecked" />
            </div>
            <div class="td">
              <img :src="item.icon" alt="" />
            </div>
            <div class="td">{{ item.price }}</div>
            <div class="td">
              <div class="my-input-number">
                <button
                  class="decrease"
                  @click="deleteNum(item.id)"
                  :disabled="item.num <= 1"
                >
                  -
                </button>
                <span class="my-input__inner">{{ item.num }}</span>
                <button class="increase" @click="addNum(item.id)">+</button>
              </div>
            </div>
            <div class="td">{{ item.price * item.num }}</div>
            <div class="td">
              <button @click="deleteItem(item.id)">删除</button>
            </div>
          </div>
        </div>
        <!-- <table class="table-font">
        <thead>
          <tr class="row table-center" style="width: 100%">
            <th>选中</th>
            <th>图片</th>
            <th>单价</th>
            <th>个数</th>
            <th>小计</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input type="checkbox" /></td>
            <td>
              <img
                src="https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/ll.png"
                alt=""
              />
            </td>
            <td>6</td>
            <td>
              <div class="my-input-number">
                <button class="decrease">-</button>
                <span class="my-input__inner">2</span>
                <button class="increase">+</button>
              </div>
            </td>
            <td>12</td>
            <td><button>删除</button></td>
          </tr>
        </tbody>
      </table> -->
      </div>
      <!-- 底部 -->
      <div class="bottom">
        <!-- 全选 -->
        <label class="check-all">
          <input type="checkbox" v-model="checkAll" />
          全选
        </label>
        <div class="right-box">
          <span class="price-box"
            >总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;
            <span class="price">{{ totalPrice }}</span>
          </span>
          <!-- 结算按钮 -->
          <button class="pay">结算( {{ totalNum }} )</button>
        </div>
      </div>
    </div>
    <!-- 空车 -->
    <div class="empty width" v-else>🛒空空如也</div>
  </div>
</template>

<style scoped>
@import "./style/index.css";
@import "./style/inputnumber.css";
</style>
